<template>
<!--缴费记录 -->
  <div class="pay">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="margin-bottom: 10px">
            <span>缴费信息</span>
          </div>
          <el-form ref="formRef" :model="formData" label-width="100px">
            <el-form-item label="学号" prop="sno">
              <el-input v-model="formData.sno" readonly></el-input>
            </el-form-item>
            <el-form-item label="缴费内容" prop="payconn">
              <el-input v-model="formData.payconn" readonly></el-input>
            </el-form-item>
            <el-form-item label="缴费金额" prop="money">
              <el-input v-model="formData.money" readonly></el-input>
            </el-form-item>
            <el-form-item label="缴费时间" prop="paydt">
              <el-input v-model="formData.paydt" readonly></el-input>
            </el-form-item>
            <el-form-item label="缴费状态" prop="status">
              <el-input v-model="formData.status" readonly></el-input>
            </el-form-item>
          </el-form>
        </el-card>
  </div>
</template>
<script setup>
import {onMounted, reactive} from "vue";
import request from "../../../utils/request";
onMounted(()=>{
  info();
  getPayRecords();
})
const userInfo=reactive({
  'sid':''
})
const info=()=>{
  //从sessionstorage取出数据
  const loginUser=sessionStorage.getItem("loginUser");
  if (loginUser){
    //更新userInfo.username
    const userobj=JSON.parse(loginUser)
    userInfo.sid=userobj.sid;
  }
}
const formData = reactive({
   'sno':'',
  'payconn':'',
  'money':'',
  'paydt':'',
  'status':''
});


const getPayRecords=()=>{
  const params={
    sno:userInfo.sid,
  };
  request({
    url:'/pay/one',
    method:'get',
    params,
  }).then(req=>{
    if (req.data.errorCode == 200){
      console.log(req.data.data)
      formData.sno=req.data.data.sno;
      formData.payconn=req.data.data.payconn;
      formData.money=req.data.data.money;
      formData.paydt=req.data.data.paydt;
      formData.status=req.data.data.status;
    }
  })
}

</script>
<style scoped>
.pay{
   width: 300px;
   height: 480px;
   margin: 50px auto;
}
</style>